{{#module}}
    <div class="todoapp">
        <div data-region="header"></div>
        <div data-region="main"></div>
        <div data-region="footer"></div>
    </div>
{{/module}}
{{#view "header"}}
    <h1>todos</h1>
    <form>
        <input id="new-todo" class="new-todo" placeholder="What needs to be done?" name="text" autocomplete="off"/>
    </form>
{{/view}}
{{#view "main"}}
    <div class="main" {{#unless haveItem}} class="hidden"{{/unless}}>
        <input id="toggleAll" class="toggle-all" {{#if completed}} checked{{/if}} type="checkbox"/>
        <ul class="todo-list">{{#each todos}}
            <li {{#if completed}} class="completed"{{/if}}>
                <div class="view">
                    <input class="toggle" {{#if completed}} checked{{/if}} type="checkbox" id="toggle-{{id}}" data-name="id" data-value="{{id}}"/>
                    <label id="edit-{{id}}">{{text}}</label>
                    <button class="destroy" id="destroy-{{id}}" data-name="id" data-value="{{id}}"></button>
                </div>
                <form>
                    <input class="edit" value="{{text}}" id="input-{{id}}" name="text"/>
                    <input type="hidden" name="id" value="{{id}}"/>
                </form>
            </li>
        {{/each}}</ul>
    </div>
{{/view}}
{{#view "footer"}}
    <div class="footer" {{#unless info.haveItem}} class="hidden"{{/unless}}>
        <span class="todo-count">
            <strong>{{info.left}}</strong>
            items left
        </span>
        <ul class="filters">
            <li class="all"><a {{#if info.all}} class="selected"{{/if}} href="#!/todos/all">All</a></li>
            <li class="active"><a {{#if info.active}} class="selected"{{/if}} href="#!/todos/active">Active</a></li>
            <li class="completed"><a {{#if info.completed}} class="selected"{{/if}} href="#!/todos/completed">Completed</a></li>
        </ul>
        <button id="remove" class="clear-completed" {{#unless info.haveCompleted}} class="hidden"{{/unless}}>Clear completed</button>
    </div>
{{/view}}
